<template>
  <div style="border: 2px solid #000;">
    <h6 @click="updateNum">组件更新(点击这里)：{{num}}</h6>
    <h5>我是userList的子组件</h5>
    <h5>父组件传递过来的参数</h5>
    <h6>name:{{ name }}</h6>
    <h6>person:{{ person }}</h6>
    <h6>ArrData:{{ ArrData }}</h6>
    <button @click="toFatherParams">toFatherParams</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, defineExpose, toRefs, ref, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
const props = defineProps({ // 用于获取父组件传递过来的参数
  name: String,
  person: {
    type: [Object, Function],
    default: () => { return {} }
  },
  ArrData: {
    type: Array,
    default: () => { return [] }
  }
})
const { name, person, ArrData } = toRefs(props) // 使用解构会使传来的数据失去响应性，通过toRefs使数据重新获得响应性
// console.log('name:', props.name, 'person:', props.person.name, 'ArrData', props.ArrData)
// 给父组件传参
const emit = defineEmits(['toFatherParams'])
const childParam = ref({ name: 'lily', age: 25, id: 123456 })
const toFatherParams = () => {
  emit('toFatherParams', childParam.value)
}
// 暴露子组件自己的属性,使父组件能够通过ref获取到子组件的信息
const handle = () => {
  console.log('123')
  return '调用成功'
}
const count = ref(2)
defineExpose({
  handle,
  count
})
// 用来触发页面更新的函数
const num = ref(0)
const updateNum = () => {
  num.value++
}

// 生命周期
console.log('setup')
// 生命周期钩子(没有beforeCreate和created)
onBeforeMount(() => { console.log('onBeforeMount') })
onMounted(() => { console.log('onMounted') })
onBeforeUpdate(() => { console.log('onBeforeUpdate') })
onUpdated(() => { console.log('onUpdated') })
onBeforeUnmount(() => { console.log('onBeforeUnmount') })
onUnmounted(() => { console.log('onUnmounted') })

// 新增的debug钩子  生产环境中会被忽略
// onRenderTracked(() => { console.log('onRenderTracked') }) // 每次渲染后重新收集响应式依赖，在onMounted前触发，页面更新后也会触发
// onRenderTriggered(() => { console.log('onRenderTriggered') }) // 每次触发页面重新渲染时的自动执行，在onBeforeUpdate之前触发
</script>

<style>
</style>
